import Base from "../base.js";
import StudentsApi from "../../api/students.js";
import Update from "./update.js";
import Add from "./add.js";
import Imgs from "./images.js";

export default class extends Base {
    constructor(props) {
        super(props)
        this.data = {
            page: 1,
            limit: 10,
            count: 0,
            maxPage: 0,
            rows: []
        }
    }
    handle() {
        this.$select.on("change", e => {
            this.data.page = this.$select.val();
            this.getStudents();
        });
        this.$limit.on("blur", e => {
            this.data.limit = this.$limit.val();
            this.data.page = 1;
            this.getStudents();
        });
        this.$tablelist.on("click", ".update-btn", async e => {
            const ele = $(e.target);
            const _id = ele.attr("_id");
            const student = this.data.rows.find(item => item._id === _id);
            const data = await StudentsApi.setInfo("updateInfo", student);
            location.hash = "#/info/update";
        }).on("click", ".upload-btn", async e => {
            const ele = $(e.target);
            const _id = ele.attr("_id");
            location.hash = `#/info/student-imgs/${_id}`;
        }).on("click", ".delete-btn", async e => {
            const ele = $(e.target);
            const _id = ele.attr("_id");
            this.delete(_id);
        });
    }
    async delete(data) {
        const obj = await StudentsApi.deletestu(data);
        this.getStudents();
    }
    async mounted() {
        this.getStudents()
    }
    async getStudents() {
        const { page, limit } = this.data;
        const obj = await StudentsApi.get({ page, limit });
        Object.assign(this.data, obj);
        this.rerender();

    }
    rerender() {
        this.$tablelist.html(`
        ${this.data.rows.map(item => {
            return `
                    <tr>
                    <td>${item._id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    <td>${item.classId.name}</td>
                    <td>${item.tel}</td>
                    <td>${item.email}</td>
                    <td>${item.city}</td>
                    <td>
                        <button _id="${item._id}" class="update-btn">修改</button>
                        <button _id="${item._id}" class="upload-btn">查看图片</button>
                        <button _id="${item._id}" class="delete-btn">删除</button>
                    </td>
                `
        })
            }
        `);
        const options = [];
        for (let i = 1; i <= this.data.maxPage; i++) {
            options.push(`<option value="${i}">${i}</option>`);
        }
        this.$select.html(options.join(""));
        this.$select.val(this.data.page);
        this.$limit.val(this.data.limit);
        this.$count.text(this.data.count);
        this.$maxPage.text(this.data.maxPage);
    }
    render() {
        this.$el.html(`
        <table border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>班级</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th>家庭地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="tablelist"></tbody>
        </table>
        <div>
            当前页：<select name="page" class="page"></select>
            每页显示<input type="text" class="limit" value="${this.data.limit}">个
            总条数：<span class="count">${this.data.count}</span>
            总页数：<span class="maxPage">${this.data.maxPage}</span>
        </div>
        <div>
            <button>首页</button>
            <button>上一页</button>
            <button>下一页</button>
            <button>尾页</button>
        </div>
        `);
        this.$tablelist = $(".tablelist");
        this.$select = $(".page");
        this.$limit = $(".limit");
        this.$count = $(".count");
        this.$maxPage = $(".maxPage");
    }
}